// 运行开发模式的指令: npx webpack serve --config ./config/webpack.dev.js

const path = require('path');
const ESLintWebpackPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// image-minimizer-webpack-plugin: 用来压缩图片的插件 在线图片不需要压缩,本地静态图片需要压缩
// const ImageMinzerPlugin = require('image-minimizer-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  output: {
    path: undefined, // 开发模式没有输出，不需要指定输出目录
    filename: 'static/js.main.js', // 将 js 文件输出到 static/js 目录中
    // clean: true, // 开发模式没有输出，不需要清空输出结果
  },
  module: {
    rules: [
      {
        // 只能匹配上一个 loader, 剩下的就不匹配了
        oneOf: [
          {
            // 用来匹配 .css 结尾的文件
            test: /\.css$/,
            // use 数组里面 Loader 执行顺序是从右到左
            use: ["style-loader", "css-loader"],
          },
          {
            test: /\.less$/,
            use: ["style-loader", "css-loader", "less-loader"],
          },
          {
            test: /\.s[ac]ss$/,
            use: ["style-loader", "css-loader", "sass-loader"],
          },
          {
            test: /\.styl$/,
            use: ["style-loader", "css-loader", "stylus-loader"],
          },
          {
            test: /\.(png|jpe?g|gif|webp)$/,
            type: "asset",
            parser: {
              dataUrlCondition: {
                maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
              },
            },
            generator: {
              // 将图片文件输出到 static/imgs 目录中
              // 将图片文件命名 [hash:8][ext][query]
              // [hash:8]: hash值取8位
              // [ext]: 使用之前的文件扩展名
              // [query]: 添加之前的query参数
              filename: "static/imgs/[hash:8][ext][query]",
            },
          },
          {
            test: /\.(ttf|woff2?)$/,
            type: "asset/resource",
            generator: {
              filename: "static/media/[hash:8][ext][query]",
            },
          },
          {
            test: /\.js$/,
            // exclude: /node_modules/, // 排除node_modules代码不编译
            include: path.resolve(__dirname, '../src'), //只检测src文件
            loader: "babel-loader",
            // 对 Eslint 检查 和 Babel 编译结果进行缓存。
            options: {
              cacheDirectory: true, // 开启babel编译缓存
              cacheCompression: false, // 缓存文件不要压缩
              plugins: ["@babel/plugin-transform-runtime"], //减少代码体积
            }
          },
        ]
      }

    ]
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "../src"),
      exclude: 'node_modules', //默认值
      cache: true, //开启缓存
      // 缓存目录
      cacheLocation: path.resolve(__dirname, '../node_modules/.cache/.eslintcache')
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    // 压缩图片
    // new ImageMinimizerPlugin({
    //   minimizer: {
    //     implementation: ImageMinimizerPlugin.imageminGenerate,
    //     options: {
    //       plugins: [
    //         ["gifsicle", { interlaced: true }],
    //         ["jpegtran", { progressive: true }],
    //         ["optipng", { optimizationLevel: 5 }],
    //         [
    //           "svgo",
    //           {
    //             plugins: [
    //               "preset-default",
    //               "prefixIds",
    //               {
    //                 name: "sortAttrs",
    //                 params: {
    //                   xmlnsOrder: "alphabetical",
    //                 },
    //               },
    //             ],
    //           },
    //         ],
    //       ],
    //     },
    //   },
    // }),
  ],
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
    // HotModuleReplacement（HMR/热模块替换）：在程序运行中，替换、添加或删除模块，而无需重新加载整个页面。
    hot: true,
  },
  mode: "development",
  // 开发模式：cheap-module-source-map(快速找到代码出错位置)
  // 优点：打包编译速度快，只包含行映射  缺点：没有列映射
  devtool: 'cheap-module-source-map',
}